<template>
	<view class="warning-inform">
		<titleName :name="name" :backShow="true"></titleName>

		<view class="content-wrap">

			<view class="urgency-degree">
				<view class="name">
					<text>*</text>预警等级
				</view>
				<uni-data-select v-model="params.colorlevel" :localdata="range" @change="change"></uni-data-select>
			</view>
			<view class="question date">
				<view class="name">
					<text>*</text>启警时间
				</view>
				<view>
					<uni-datetime-picker @change="updateDate1" :hide-second="true" type="datetime"
						v-model="params.monitorstarttime" />
				</view>
			</view>
			<!-- <view class="question date">
				<view class="name">
					<text>*</text>结束时间
				</view>
				<view>
					<uni-datetime-picker @change="updateDate2" type="datetime" v-model="single2" />
				</view>
			</view>
			<view class="send-name">
				<text>*</text>请导入管控企业名单
			</view> -->
			<!-- <view class="type-sel">
				<view @click="updateActive(1)" :class="[active==1?'journalism active':'journalism']">所有企业</view>
				<view @click="updateActive(2)" :class="[active==2?'law active':'law']">个别企业</view>
			</view> -->
			<!-- <view class="phone-wrap">
				<view class="name"> <text>*</text> 联系电话</view>
				<view class="ipt">
					<image class="img" :src="resourceUrl+'mine-phone.png'" mode=""></image>
					<input type="text" v-model="params.mobile" placeholder="手机号码" placeholder-class="ipt-phone" />
				</view>
			</view> -->
			<!-- 	<view class="upload-phone">
				<view class="name">图片</view>
				<view style="display: flex;flex-wrap: wrap;">
					<view class="upload" @click="checkImage" style="margin-right: 20rpx;">
						<image :src="resourceUrl+'mine-upload-icon.png'" mode="">
						</image>
						<text>（选择照片）</text>
					</view>
					<view :class="['for-image',index==2?'sb':'']" v-for="(item,index) in images" :key="index">
						<image :src="item" mode="">
						</image>
						<view class="dele" @click="deleImage(index)">✕</view>
					</view>
				</view>
			</view> -->
			<!-- <view class="upload-file" v-if="active==1">
				<view class="name"><text>*</text>导入管控企业</view>
				<view class="file-list" v-for="item,index in fileUrl" :key="item">
					<image class="pdf" :src="resourceUrl+'xlsx.png'" mode=""></image>
					<view class="file-msg">
						<view class="msg">
							<view class="name">{{fileName[index]}}</view>
							<view class="size">{{fileSize[index]}}kb</view>
						</view>
						<view class="pre-view" @click="preWatch(item)">预览</view>
						<image class="err-icon" @click="deleFile(index)" :src="resourceUrl+'error-icon.png'" mode="">
						</image>
					</view>
				</view>
				<view class="upload-icon" @click="uploadPdf">
					<image :src="resourceUrl+'plus-icon.png'" mode=""></image>
				</view>
			</view> -->
			<view class="btn-wrap">
				<button @click="submit">提交</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import http from '../../request/index'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		resourceUrl
	} from '../../request/config'
	import uploadFile from '../../request/uploadFile.js'
	import {
		reactive,
		ref
	} from 'vue'
	let name = "预警通知"
	let images = reactive([])
	let active = ref(1)
	let fileUrl = ref([])
	let fileName = ref([])
	let fileSize = ref([])
	let single1 = ref('')
	let single2 = ref('')
	let params = reactive({})
	let range = ref([{
			value: 1,
			text: "红色预警"
		},
		{
			value: 2,
			text: "橙色预警"
		},
		{
			value: 3,
			text: "黄色预警"
		},
	])
	let change = (e) => {
		params.colorlevel = e
	}
	let value = ref('')
	onShow(() => {

	})


	let uploadPdf = () => {
		uni.chooseMessageFile({
			// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			// count: 10,
			type: "all",

			success: function(res) {
				let resultRes = res
				let tempFiles = res.tempFiles
				for (let i = 0; i < tempFiles?.length; i++) {
					uploadFile({
						filePath: tempFiles[i].path,
						type: 'pdf'
					}).then((res) => {
						if (res.code == 0) {
							fileUrl.value.push(res.data.url)
							fileName.value.push(tempFiles[i].name)
							fileSize.value.push(tempFiles[i].size)

						}

					})
				}



			}
		});

	}
	let checkImage = () => {
		uni.chooseImage({
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			count: 10,
			success: function(res) {
				let tempFilePaths = res.tempFilePaths
				console.log(tempFilePaths, 'tempFilePaths');
				for (var i = 0; i < tempFilePaths.length; i++) {
					uploadFile({
						filePath: tempFilePaths[i]
					}).then((res) => {

						if (res.code == 0) {
							images.push(res.data.url)

							// enterpriseMsg.authbook = res.data.url
						}

					})
				}



			}
		});

	}
	let deleFile = (index) => {
		fileUrl.value.splice(index, 1)
	}
	let deleImage = (index) => {

		images.splice(index, 1)

	}
	let updateActive = (id) => {
		active.value = id

	}
	let updateDate1 = (e) => {

		let arr = e.split(':')
		arr.push('00')
		arr = arr.join(":")

		params.monitorstarttime = arr

	}
	let updateDate2 = (e) => {

		params.monitorendtime = e


	}
	let preWatch = (item) => {
		uni.downloadFile({
			url: item,
			success: function(res) {
				var filePath = res.tempFilePath;
				uni.openDocument({
					filePath: filePath,
					showMenu: true,
					success: function(res) {
						console.log('打开文档成功');
					}
				});
			}
		});
	}
	let submit = () => {

		if (!params.monitorstarttime) {
			uni.showToast({
				title: '请选择起警时间',
				icon: "none"
			})
			return
		}

		if (!params.colorlevel) {
			uni.showToast({
				title: '请选择紧急程度',
				icon: "none"
			})
			return
		}

		// let sendObj = {}
		// if (active.value == 1) {
		// 	sendObj.groupid = 0
		// } else {
		// 	sendObj.attachmenturl = fileUrl.value.join(',')
		// 	sendObj.attachmentname = fileName.value.join(',')
		// }

		http({
			url: '/greenAdmNotice/addOrUpdate',
			data: {
				...params
			}
		}).then((res) => {
			if (res.code == 0) {
				uni.showToast({
					title: '提交成功',
					icon: 'none'
				})
				images.length = 0
				for (let key in params) {
					delete params[key]
				}
				fileUrl.value.length = 0
				fileName.value.length = 0
				fileSize.value.length = 0
				single1.value = ''
				single2.value = ''

			}

		})
	}
</script>

<style lang="scss" scoped>
	:deep(.ipt-class) {

		font-weight: 400;
		font-size: 31rpx;
		color: #BFBEBE;
		line-height: 50rpx;

	}

	:deep(.uni-select__input-placeholder) {

		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 30rpx;
		color: #030303;

	}

	:deep(.uni-date__x-input) {
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 30rpx;
		color: #030303;
	}

	:deep(.uni-date-editor) {
		width: 510rpx;
		height: 79rpx;
		background: #FAFAFA;
		border-radius: 14rpx;

	}

	:deep(.ipt-phone) {

		font-weight: 500;
		font-size: 31rpx;
		color: #BFBEBE;

	}

	:deep(.uni-select) {
		margin-left: 30upx;
		width: 502rpx;
		height: 74rpx;
		background: #FAFAFA;
		border-radius: 7rpx;
		border: 1px solid #BFBFBF;
		padding-left: 40upx;

		font-weight: 400;
		font-size: 30rpx;
		color: #030303;

	}

	.warning-inform {
		width: 100vw;
		height: 100vh;
		// padding-top: 160rpx;
		padding-bottom: 50rpx;

		.content-wrap {
			height: calc(100vh - 160upx);
			overflow: scroll;
			padding-bottom: 100upx;

			.question.date {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right: 40upx;
			}

			.question {

				padding-left: 31rpx;
				margin-bottom: 32rpx;

				text {
					color: #F82A24;
				}

				font-weight: 400;
				font-size: 33rpx;
				color: #000;

			}

			.btn-wrap {
				padding: 0 39rpx;
				margin-top: 104rpx;

				button {
					width: 100%;
					height: 88rpx;
					background: #0874FA;
					border-radius: 44rpx;

					font-weight: 400;
					font-size: 34rpx;
					color: #FFFFFF;
					line-height: 88upx;

				}
			}

			.upload-file {
				margin-top: 40upx;


				.upload-icon {
					width: 97rpx;
					height: 97rpx;
					background: #FFFFFF;
					border-radius: 7rpx;
					border: 2px dashed #BFBFBF;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 31upx;

					image {
						width: 36upx;
						height: 36upx;
					}
				}

				.name {
					font-weight: 500;
					font-size: 33rpx;
					color: #333333;
					padding-left: 31upx;
					margin-bottom: 30upx;

					text {
						color: #F82A24
					}
				}

				.file-list {

					display: flex;
					align-items: center;
					padding-left: 31upx;
					margin-bottom: 26upx;

					.pdf {
						width: 82upx;
						height: 92upx;
					}

					.file-msg {
						display: flex;
						align-items: center;


						.msg {
							display: flex;
							flex-direction: column;
							height: 92upx;
							padding: 12upx 0 8upx 0;
							justify-content: space-between;
							padding-left: 29upx;
							width: 380upx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;

							.name {
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								padding-left: 0;
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 32rpx;
								color: #292B2C;
								margin-bottom: 0;
							}

							.size {

								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 22rpx;
								color: #A5A9A7;

							}
						}


						.pre-view {
							width: 92rpx;
							height: 46rpx;
							background: #FFFFFF;
							border-radius: 23rpx;
							border: 1px solid #E9E9E9;

							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 25rpx;
							color: #818181;
							text-align: center;
							line-height: 46upx;

						}

						.err-icon {
							width: 40upx;
							height: 40upx;
							margin-left: 62upx;
						}
					}
				}
			}

			.send-name {
				font-weight: 400;
				font-size: 33rpx;
				color: #000;
				padding-left: 31rpx;

				margin-bottom: 32upx;

				text {
					color: #F82A24;
				}
			}

			.urgency-degree {
				display: flex;
				align-items: center;
				height: 152upx;

				.name {
					font-weight: 400;
					font-size: 33rpx;
					color: #000;
					padding-left: 31rpx;
					margin-top: 40rpx;
					margin-bottom: 32upx;

					text {
						color: #F82A24;
					}
				}
			}

			.upload-phone {
				margin-top: 40rpx;
				padding-left: 31rpx;


				.name {

					font-weight: 500;
					font-size: 33rpx;
					color: #000000;
					margin-bottom: 30rpx;

				}

				.for-image {
					margin-right: 20rpx;
					margin-top: 20rpx;
					position: relative;

					image {
						width: 150rpx;
						height: 150rpx;
					}
				}

				.dele {
					position: absolute;

					width: 30rpx;
					height: 30rpx;
					background: #989A9E;
					position: absolute;
					border-radius: 50%;
					right: -15rpx;
					top: -15rpx;
					color: #FFFFFF;
					display: flex;
					font-size: 17rpx;
					align-items: center;
					justify-content: center;
				}



				.for-image:nth-of-type(1),
				.for-image:nth-of-type(2),
				.for-image:nth-of-type(3) {
					margin-top: 0rpx !important;
				}

				.sb {
					margin-top: 0rpx;
				}

				.upload {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 149rpx;
					height: 149rpx;
					background: #FFFFFF;
					border-radius: 7rpx;
					border: 2px dashed #BFBFBF;

					image {
						width: 40rpx;
						height: 35rpx;
					}

					text {
						margin-top: 11rpx;
						font-weight: 400;
						font-size: 15rpx;
						color: #999999;

					}
				}
			}

			.type {
				font-weight: 400;
				font-size: 33rpx;
				color: #000;
				padding-left: 31rpx;
				margin-top: 40rpx;
				margin-bottom: 32upx;

				text {
					color: #F82A24;
				}
			}

			.type-sel {
				display: flex;
				align-items: center;
				padding-left: 31rpx;

				.active {
					background: #0874FA !important;
					color: #FFFFFF !important;

				}

				.law {
					margin-left: 32upx;
				}

				.law,
				.journalism {
					width: 210rpx;
					height: 82rpx;
					background: #F3F4FA;
					border-radius: 14rpx;

					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 31rpx;
					color: #333333;
					line-height: 82upx;
					text-align: center;
				}
			}

			.phone-wrap {
				padding-left: 48rpx;
				padding-right: 48rpx;
				margin-top: 30rpx;

				.name {
					width: 100%;

					font-weight: 400;
					font-size: 33rpx;
					color: #000;

					text {
						color: #F82A24;
					}
				}

				.ipt {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					border-bottom: 2rpx solid #AAAAAA;
					height: 89rpx;
					width: 100%;

					.img {
						width: 35rpx;
						height: 35rpx;
						margin-right: 33rpx;
					}

					input {
						flex: 1;
					}
				}


			}

			.ipt-wrap.enterprise {
				height: 180rpx;
			}

			.ipt-wrap {

				margin: 0 auto;

				padding-left: 24rpx;
				padding-top: 30rpx;
				width: 689rpx;
				height: 395rpx;
				background: #FAFAFA;
				border-radius: 7rpx;
				border: 1px solid #BFBFBF;

				textarea {
					width: 100%;
					line-height: 50rpx;
					height: 100%;
				}
			}
		}





	}
</style>